<template>
  <div>
    <div class="header">
      <div class="headerLeft">
        <ul>
          <li @click="getCenter">
            首页
          </li>
          <li>
            空间管理
          </li>
          <li >
           设备设施
          </li>
          <li >
           智慧安防
          </li>
          <li>
            人员管理
          </li>
        </ul>
      </div>
      <div class="headerCenter">示例</div>
      <div class="headerRight">
        <div class="rightRow">
          <div class="rightC-1">
            <dl>
              <dt>
                <span class="el-avatar el-avatar--circle"
                  ><img
                    src="/data/gly.png"
                    style="object-fit: cover"
                /></span>
              </dt>
              <dd>
                <h3>管理员</h3>
                <!-- <span>ID：2145</span> -->
              </dd>
            </dl>
          </div>
          <div class="rightC-2">
            <dl>
              <dt class="line"></dt>
              <dd>
                <h3>{{wendu}}℃</h3>
                <span>{{type}}</span>
              </dd>
              <dd>
                <h3>{{PM25}}</h3>
                <span>PM25</span>
              </dd>
              <dd>
                <h3>湿度</h3>
                <span>{{wendu}}</span>
              </dd>
            </dl>
          </div>
          <div class="rightC-3">
            <h3>{{week}}</h3>
            <span>{{year}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      copyCenter: null,
      year: null,
      week: null,
      time: null,
      type: null,
      wendu: null,
      aqi: null,
      quality: null,
      PM25:null
    };
  },
  mounted() {
    this.getDate();
    this.initWeather();
  },
  methods: {
    toHome() {
      this.$router.push("/");
    },
    changeLabelProvider() {},
    getCenter() {
      let result = this.$cp.getCenter();
      console.log(result)
    },
    onCopy() {
      this.$message({
        message: "已复制到粘贴板",
        type: "success",
      });
    },
    getDate() {
      setInterval(() => {
        const date = new Date();
        const hour = date.getHours();
        const minute = date.getMinutes();
        const second = date.getSeconds();
        const month = date.getMonth() + 1;
        const today = date.getDate();
        this.time =
          timeToString(hour) +
          ":" +
          timeToString(minute) +
          ":" +
          timeToString(second);
        this.year =
          date.getFullYear() +
          "/" +
          timeToString(month) +
          "/" +
          timeToString(today);
        //const weekday = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
        const weekday = [
          "周日",
          "周一",
          "周二",
          "周三",
          "周四",
          "周五",
          "周六",
        ];
        this.week = weekday[date.getDay()];
        function timeToString(nowTime) {
          if (nowTime < 10) {
            return "0" + nowTime;
          } else {
            return "" + nowTime;
          }
        }
      }, 1000);
    },
    initWeather() {
      axios.get("/weather" + "101190101").then((res) => {
        let data = res.data.data;
        this.quality = data.quality;
        this.wendu = data.wendu;
        this.PM25 = data.pm25;
        this.type = data.forecast[0].type;
        this.aqi = data.forecast[0].aqi;
      });
    },
  },
};
</script>

<style lang="stylus" scoped>
@import '../../assets/css/varibles.styl';

.header {
  width: 100%;
  height: 0.6rem;
  z-index: 2;
  position: relative;
  top: 0;
  left: 0;
  .headerLeft {
    position: absolute;
    left: 0.3rem;
    ul{
        display:flex;
        justify-content :space-around;
        li{
            cursor: pointer;
            color: #9cc6ff;
            margin-right:20px;
            font-size: .16rem;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: .6rem;
        }
    }
  }
  .headerCenter {
    position: absolute;
    left: 50%;
    font-size: 0.3rem;
    line-height:0.6rem;
    transform: translateX(-50%);
  }
  .headerRight {
    position: absolute;
    right: .3rem;
    height: .25rem;
    font-size: .11rem;
    top:.1rem;
    .rightRow{
        display:flex;
        justify-content :space-around;
        align-items :center;
        .rightC-1 {
            margin-right:20px;
            dl{
                display:flex;
                justify-content :space-around;
                align-items :center;

                dt{
                    margin-right:10px;
                }
            }
            
        }
        .rightC-2 dl{
            display:flex;
            justify-content :space-around;
            align-items :center;
            margin-right:10px;
            dd{
                margin-right:10px;
            }
        }
    }
  }
}
</style>;